<template>
  <div class="qckc">
    <el-button
      type="info"
      @click="fanhui"
      style="margin-bottom: 20px; width: 100px; height: 40px"
      >返回</el-button
    >
    <header>
      <el-table :data="Statistics.headerData" style="margin: 0 0 30px 0">
        <el-table-column prop="water_code" label="水票ID" width="320">
        </el-table-column>
        <el-table-column prop="water_name" label="水票名称" width="220">
        </el-table-column>
        <el-table-column prop="sale_num" label="总销量 "> </el-table-column>
        <el-table-column prop="apply_number" label="已使用 "> </el-table-column>
        <el-table-column prop="balance_number" label="未使用 ">
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            {{ scope.row.shelf_status === "1" ? "上架" : "下架" }}
          </template>
        </el-table-column>
      </el-table>
    </header>

    <!-- 销售明细 -->
    <div class="content">
      <h3 class="p1">销售明细</h3>
      <div class="head">
        <el-form
          class="h-from"
          ref="form"
          :model="waterParams"
          label-width="130px"
        >
          <el-form-item label="订单完成时间">
            <el-date-picker
              clearable
              type="date"
              v-model="waterParams.start_date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 135px"
            ></el-date-picker>
            -
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="waterParams.end_date"
              clearable
              type="date"
              placeholder="选择日期"
              style="width: 135px"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <el-input
          v-model="waterParams.key_words"
          placeholder="请输入订单号/手机号/账号"
          prefix-icon="el-icon-search"
          clearable
          style="margin: 0px 0 0 20px; width: 230px; height: 40px"
        >
        </el-input>
        <el-button
          type="primary"
          style="margin: 0px 0 0 20px; width: 100px; height: 40px"
          @click="servicedetail"
          >搜索</el-button
        >
      </div>

      <!-- 明细表 -->
      <el-table :data="Statistics.tableData">
        <el-table-column width="80" type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="操作时间"
          align="center"
          width="220"
        >
        </el-table-column>
        <el-table-column
          prop="order_water_no"
          label="订单号"
          align="center"
          width="220"
        >
        </el-table-column>
        <el-table-column prop="type" align="center" label="充值/消费 ">
        </el-table-column>
        <el-table-column label="明细 " align="center">
          <template slot-scope="scope">
            {{
              (scope.row.type === "消费" ? "- " : "+ ") + scope.row.order_num
            }}
          </template>
        </el-table-column>
        <el-table-column prop="user_name" label="用户姓名 " align="center">
        </el-table-column>
        <el-table-column prop="phone" label="绑定手机号 " align="center">
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="fenye">
        <el-pagination
          background
          layout="pager, next, jumper"
          next-text="下一页"
          :page-count="waterParams.page_num"
          :pager-count="5"
          @current-change="handleCurrentChange"
          :total="Statistics.all_data_num"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getWaterStatisticsDetail } from '@/api/water'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      waterParams: {
        page_num: 1,
        page_size: 10,
        key_words: "",
        start_date: "",
        end_date: "",
      },
      Statistics: {
        tableData: [],
        headerData: [{
          water_code: "",
          water_name: "",
          shelf_status: 0,
          sale_num: 0,
          balance_number: 0,
          apply_number: 0,
        }],
        all_data_num: 0,
      },
    };
  },
  computed: {
    ...mapGetters(['token']),
  },
  methods: {
    fanhui() {
      this.$router.back();
    },
    handleCurrentChange(val) {
      this.waterParams.page_num = val;
      this.getListForDetail();
    },
    getListForDetail() {
      let obj = {
        token: this.token,
        water_id: this.$route.query.water_id,
        page_size: this.waterParams.page_size,
        page_num: this.waterParams.page_num,
      }
      if (this.waterParams.start_date && this.waterParams.end_date &&
        new Date(this.waterParams.start_date).getTime() < new Date(this.waterParams.end_date).getTime()) {
        obj.start_date = this.waterParams.start_date;
        obj.end_date = this.waterParams.end_date;
      }
      if (this.waterParams.keywords) {
        obj.keywords = this.waterParams.keywords;
      }
      getWaterStatisticsDetail(obj).then(res => {
        if (res.state) {
          const {
            water_code,
            water_name,
            sale_num,
            balance_number,
            apply_number,
            all_data_num,
            list,
            current_page_num,
            current_page_size,
            shelf_status
          } = res.data;
          this.waterParams.page_size = current_page_size;
          this.waterParams.page_num = current_page_num;
          this.Statistics.tableData = list;
          this.Statistics.headerData = [{
            water_code,
            water_name,
            balance_number,
            sale_num,
            apply_number,
            shelf_status,
          }]
          this.Statistics.all_data_num = all_data_num;
        }
      })
    },
    servicedetail() {
      this.getListForDetail();
    }
  },
  mounted() {
    this.getListForDetail()
  }
};
</script>

<style lang="scss" scoped>
.qckc {
  width: 98%;
  overflow: hidden;
  margin: 1%;

  header {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #fff;
    display: flex;
    padding: 0 4%;
  }
  .content {
    width: 100%;
    height: 500px;
    background-color: #fff;
    .p1 {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #bbb;
      padding: 0 4%;
    }
    .head {
      display: flex;
      padding: 0 4%;
      //   .h-from {
      //     margin: 30px 0 0 49%;
      //   }
    }
    .fenye {
      width: 100%;
      margin-top: 80px;
      .el-pagination,
      .is-background {
        float: right;
        margin-right: 12%;
      }
    }
  }
}
</style>